
#### Table of Contents

1. Only showing Play Icon for youtube video
2. vimeo video
3. Load youtube iFrame from javascript

#### Only showing Play Icon for youtube video

If you don't like youtube default setting as, title, youtube mark, just append
following parameters to your youtube url and your embed youtube will looks
like following.

`?showinfo=0&color=white&autohide=1`

```
http://www.youtube.com/embed/9tzyJEwO9Os?showinfo=0&color=white&autohide=1
```

if you want to check the rest of the parameters.

YouTube Embedded Players and Player Parameters

#### vimeo video

Following is another video site, vimeo's default view. Good thing for vimeo is
you can easily change the play icon color like following.

```

```

#### Load youtube iFrame from javascript

from
http://stackoverflow.com/questions/18220209/load-youtube-video-listen-to-onplayerstatechange

```
// Load API asynchronously.
var tag = document.createElement('script');
tag.src = "https://www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
var player;
function onYouTubeIframeAPIReady() {
    player = new YT.Player('player', {
        height: '220',
        width: '300',
        videoId: '9tzyJEwO9Os',
        playerVars: {'showinfo': 0, 'color': 'white', 'autohide': 1},
        events: {'onStateChange': onPlayerStateChange}
    });
}

function onPlayerStateChange(event) {
    if(event.data === 0) {
        hideVideo();
    }
}

$("#link").click(function(){
    $('#player').show(); // show player
    player.playVideo(); // begin playback
});
```


How to Embedded Video on Your Site


## Table of Contents

1. [Introduction](#introduction)
2. [Popular Intranet Platforms](#popular-intranet-platforms)
3. [Pantheon Platform Deep Dive](#pantheon-platform-deep-dive)
4. [Orchard CMS Overview](#orchard-cms-overview)
5. [Comparative Analysis](#comparative-analysis)
6. [Conclusion](#conclusion)

## Introduction

Every company needs a backend-office system—whether it's an SCM (Supply Chain Management), ERP (Enterprise Resource Planning), or general intranet solution. Rather than building everything from scratch, leveraging existing platforms can save significant time and resources.

This guide provides a curated list of intranet platforms with various capabilities, tech stacks, and pricing models. You can choose to build custom solutions or start with pre-existing frameworks and customize them to fit your needs.

## Popular Intranet Platforms

Below is a comprehensive list of 13 popular platforms for building intranet applications:

### PHP-Based Solutions

1. **[ExoPlatform](http://www.exoplatform.com/)** - PHP
2. **[OpenAtrium](http://openatrium.com/#!/)** - PHP
3. **[Pantheon](https://www.getpantheon.com/)** - PHP (Hosted)
4. **[Acquia Drupal 7](http://www.acquia.com/Drupal-7)** - PHP

### ASP.NET Solutions

5. **[Composite C1](http://www.composite.net/)** - ASP.NET Razor, Web Forms, MVC
6. **[BetterCMS](http://www.bettercms.com/)** - ASP.NET MVC Platform
7. **[Kentico](http://www.kentico.com/)** - ASP.NET Platform
8. **[LeMoon](http://www.lemoon.com/)** - ASP.NET Platform
9. **[MojoPortal](https://www.mojoportal.com/)** - ASP.NET (Blogs, Forums, Calendar, Newsletter, Maps, eCommerce)
10. **[MonoX](http://monox.mono-software.com)** - ASP.NET CMS and Social Networking Platform
11. **[Orchard CMS](http://www.orchardproject.net/)** - ASP.NET MVC (Open Source)
12. **[Virto Commerce](http://virtocommerce.com/)** - .NET 4.5 (MVC, IoC, Entity Framework, Azure)

### Enterprise Solutions

13. **[SharePoint Online](http://office.microsoft.com/en-us/sharepoint/)** - Microsoft

## Pantheon Platform Deep Dive

If you're starting a new system and want flexibility to customize while supporting multiple programming languages, **[Pantheon](https://dashboard.getpantheon.com/)** is highly recommended.

### Key Features

- **Foundation**: Built on open-source OpenAtrium with essential modules for login, security, role management, and content management
- **Free Tier**: Try it out at no cost
- **Multi-Environment Support**: Development (DEV), Testing (TEST), and Production (PROD) environments
- **Deployment Options**: Deploy code via SFTP or Git
- **Data Management**: Export databases and files easily
- **Infrastructure**: No need to manage web servers yourself

### Why Choose Pantheon?

Pantheon accelerates development by handling infrastructure management while allowing you to focus on building features. If budget allows, you can launch quickly and manage an admin panel without extensive DevOps work.

> **Technology Stack**: PHP-based with integrated hosting

### Development Workflow Visualization

Pantheon provides a streamlined workflow across multiple environments:

![Pantheon DEV, TEST, PROD Environment](https://res.cloudinary.com/dmwrakaup/image/upload/v1409270535/esncffv6vvtpqat6mgsz.png)

## Orchard CMS Overview

**[Orchard](http://www.orchardproject.net/)** is an excellent choice for building intranet applications using the Microsoft tech stack.

### Technology Stack

- **Language**: C#
- **Framework**: ASP.NET MVC
- **Open Source**: Free to use and modify

### Strengths

- Similar architecture to OpenAtrium but with .NET ecosystem advantages
- Strong integration with Windows server environments
- Modular plugin architecture
- Extensive theming capabilities

### Considerations

- Requires hosting on your own infrastructure
- Learning curve if unfamiliar with ASP.NET MVC
- Development and deployment setup required

## Comparative Analysis

The following table compares three major platforms across key dimensions:

| Feature              | OpenAtrium            | Pantheon              | SharePoint Online                                | Orchard CMS        |
| -------------------- | --------------------- | --------------------- | ------------------------------------------------ | ------------------ |
| **Language**         | PHP + Apache          | PHP + Apache          | Microsoft                                        | C# ASP.NET MVC     |
| **Features**         | Source code + modules | Hosted OpenAtrium     | Social, Content Mgmt, Workflows, Work Management | Content Management |
| **Setup Complexity** | High (DIY)            | Low (Managed Hosting) | Low (SaaS)                                       | Medium (DIY)       |
| **Customization**    | Very Flexible         | Very Flexible         | Limited                                          | Very Flexible      |
| **Infrastructure**   | Self-hosted           | Managed               | Cloud-hosted                                     | Self-hosted        |
| **Price**            | Free                  | Pay-per-use           | $5+/user/month                                   | Free (base)        |

### Pros & Cons Breakdown

#### OpenAtrium

**Pros:**

- Excellent UI out of the box
- Extensive feature set
- Large community support
- PHP—most widely used web language
- Full application lifecycle management
- Completely free

**Cons:**

- Requires setup of entire development environment
- Infrastructure and server management needed
- Database and file management responsibility
- Longer deployment learning curve

#### Pantheon

**Pros:**

- All OpenAtrium advantages included
- Pre-configured DEV, TEST, PROD environments
- Ready-to-deploy hosting
- Git-based workflow integration
- Minimal infrastructure management

**Cons:**

- Requires subscription payment
- Limited free tier (3 sites)
- Vendor lock-in to Pantheon platform

#### SharePoint 2013 (On-Premises)

**Pros:**

- Rich customization capabilities
- Enterprise-grade features
- Extensive integration ecosystem

**Cons:**

- Requires dedicated server setup
- Expensive licensing costs
- Complex initial deployment
- Significant IT resources needed

#### SharePoint Online

**Pros:**

- Managed cloud service
- No server maintenance required
- Microsoft support included

**Cons:**

- High per-user costs ($5+/month minimum)
- Limited customization options
- Less flexibility for complex workflows

#### Orchard CMS

**Pros:**

- Clean architecture (similar to OpenAtrium)
- ASP.NET ecosystem integration
- Open source
- Modern C# language features

**Cons:**

- Requires self-hosting
- Smaller community than OpenAtrium
- Some advanced modules require payment

## Choosing the Right Platform

### For Maximum Flexibility with Minimal Cost

**Choose: OpenAtrium**

- Best if you have in-house development resources
- Ideal for teams comfortable with infrastructure management

### For Rapid Deployment

**Choose: Pantheon**

- Best for teams wanting to launch quickly
- Ideal when you want managed hosting with customization

### For Enterprise Environments

**Choose: SharePoint**

- Best for large organizations with existing Microsoft infrastructure
- Ideal when integration with Office 365 is needed

### For .NET-Based Development

**Choose: Orchard CMS**

- Best for teams with C# expertise
- Ideal when you want open-source with .NET power

## Conclusion

The choice of intranet platform depends on several factors:

1. **Budget**: From free (OpenAtrium, Orchard) to enterprise licensing (SharePoint)
2. **Technical Resources**: DIY platforms vs. managed hosting solutions
3. **Tech Stack**: PHP, .NET, or cloud-native preference
4. **Timeline**: Quick launch vs. custom-built solutions
5. **Scalability Needs**: From small teams to enterprise organizations

There are numerous options available for building intranet systems. The comparison table above highlights the key differences between popular choices like OpenAtrium, Pantheon, and Orchard CMS. Consider your team's technical expertise, budget constraints, and long-term maintenance capabilities when making your decision.

**Key Takeaway**: Rather than starting from scratch, leveraging an existing platform with a strong community and proven track record will save you months of development time.


A comprehensive guide to choosing the right backend office system for your company. Compare open-source solutions like OpenAtrium and Orchard with enterprise options like SharePoint.

13 Intranet Applications for Backend Office Systems

#### Table of Contents

1. What's Swagger?
2. Use Azure API App template with Swagger
3. Can I Use a customized stylesheet for Swagger?
4. 1. CSS file
5. 2. SwaggerConfig
6. 3. Global.ascx
7. Can I add my own Javascript file to Swagger API documents?
8. 2. SwaggerConfig for Html
9. 3. That's it, let's check the browser.
10. Add .NET XML comment for swagger's API description
11. Conclusion

This walkthrough turtorial is about how to setup Swagger with ASP.NET MVC API
by using Visual Studio 2015, also provide steps of how to customize the
swagger UI.

## What's Swagger?

Swagger could provide more rich documents for your API, but that's not it, it
provides how to design tests and documentation about your API. Although, this
blog just focuses on how to set up Swagger UI on Visual Studio 2015's ASP.NET
API project. ASP.NET MVC also has a Web API Helper page but unlike Swagger,
which is more powerful with client generation, discoverable, and more
developer support.

This blog will show how to use Swagger to ASP.NET MVC API project and provide
a list of how to.

> With a Swagger-enabled API, you get interactive documentation, client SDK
> generation and discoverability.

```
Install-Package Swashbuckle
```

Following are few information relative with Swagger.

  - [swagger.io](http://swagger.io/)

  - Swashbuckle

  - swagger-codegen

  - swagger-ui

  - OpenAPI Specification

## Use Azure API App template with Swagger

You can use Swagger with Visual Studio 2015, ASP.NET 4.5.2 Templates. Once you
use Visual Studio and create a web application by template Azure API App, at
your solution you should see the following Swagger at the package file.

![](http://res.cloudinary.com/dmwrakaup/image/upload/v1458931625/vrtczaiykyxoxtecgloc.png)

You will find the NuGet library `Swashbuckle`, that .NET version of
Swagger, if you want to use the latest NuGet version. You can use NuGet to
uninstall the package and install the latest NuGet package again.

![](https://d1p0mp3f1fx0hz.cloudfront.net/_dp4q0c174.png)

###
`SwaggerConfig` and `EnableSwaggerUi` and basic
configuration

After installing Swashbuckle, you will see a SwaggerConfig under your
App_Start folder. This `SwaggerConfig` is the start point to enable
Swagger. At the following, if you have already contained, then your setup is
done. We should see the API document written by Swagger.

```
[assembly: PreApplicationStartMethod(typeof(SwaggerConfig), "Register")]

namespace WebApplication1
{
    public class SwaggerConfig
    {
        public static void Register()
        {
            var thisAssembly = typeof(SwaggerConfig).Assembly;

            GlobalConfiguration.Configuration

                .EnableSwagger(c =>
                    // {...
                    // this will enable swagger UI
                .EnableSwaggerUi(c =>
```

###
Build the solution and check the URL
`{yoururl}/swagger or {yoururl/swagger/ui/index`

Boom!!!, you should be able to see the following swagger UI document page. I
have two Web APIs, `TestController` and
`ValuesController.`As you can see, it contains a search feature
and you can try it out!!?

![](http://res.cloudinary.com/dmwrakaup/image/upload/v1458932570/vbbqw3dh7xbalqxmxlyd.png)

![](https://d1p0mp3f1fx0hz.cloudfront.net/_3cxww0sfn.png)

However, I also got the following question when I first see these pages
generated by Swagger.

  - Can I change this API document's UI, including logo, stylesheet?

  - Can I add javascript to this?

  - Can I change the URL instead of /swagger?

  - Can I add my own page to this auto-generated page?

  - Can I make certain Web API does not show?

  - Can I turn the swagger's API documents off at production, but only in
development?

I might not cover all these questions I have in my mind but will give them a
try and list them here.

### Can I Use a customized stylesheet for Swagger?

Let's assume I want to change the following style, which changes the header
background color to `#704C8F`.

### 1. CSS file

```
.swagger-section #header {
    background-color: #704C8F;
    padding: 14px;
}
```

### 2. SwaggerConfig

```
.EnableSwaggerUi(c =>                   {
c.InjectStylesheet(Assembly.GetAssembly(typeof(WebApiApplication)), "WebApplication2.styles.swagger_test.css");
```

### 3. Global.ascx

#### How the WebApiApplication looks like

The SwaggerConfig's InjectStylesSheet's first parameter need to pass the
current application's assembly, the second parameter is a little tricky. The
filename `WebApplication2.styles.swagger_test.css`is
`Project Folder name`.`{folder name}` and the file name.

```
namespace WebApplication2
{
    public class WebApiApplication : System.Web.HttpApplication
    {
        protected void Application_Start()
        {
            AreaRegistration.RegisterAllAreas();
            GlobalConfiguration.Configure(WebApiConfig.Register);
            RouteConfig.RegisterRoutes(RouteTable.Routes);
        }
    }
}
```

#### 4. styles file location

Also, this is very important, you have made the file BuildAction an Embedded
Resource.

```

```

#### 4. After 1 - 4 steps, how the page looks like

![](http://res.cloudinary.com/dmwrakaup/image/upload/v1458968917/vetiqfmu4mizsfyolm2h.png)

### Can I add my own Javascript file to Swagger API documents?

You are able to do it as follows, assume you have a javascript file like this.

1. Javascript

```
(function () {
    function init() {

        console.info("init for my swagger function");

        $("#explore").click(function () {
            alert("you clicked explore");
        });
    }

    init();
})();
```

#### 2. Javascript file location and Build Action Property

```

```

#### 3. SwaggerConfig class

set the javascript path as string type like following.

```
var myAssembly = Assembly.GetAssembly(typeof(WebApiApplication));
   c.InjectJavaScript(myAssembly, "WebApplication2.js.swagger_test.js");
```

#### 4. Done, check the page

When the page load, you can see the javascript console message, now you can
add javascript to the page, my next question is can I change the default Html?

![](http://res.cloudinary.com/dmwrakaup/image/upload/v1458969860/h3novy9llbwau4kearez.png)

###
Now, we know we can change javascript, CSS, can we change the entire HTML?

Yes, and the main feature will still work if you use the swagger's existing
javascript. Following is how we can do it.

#### 1. Html Files

This time I want to add two HTML, after creating these HTML you also have to
change Build Action as Embedded Resource again.

![](http://res.cloudinary.com/dmwrakaup/image/upload/v1458971711/evgs4ci6wclqwpqpirxg.png)

swagger_test.html

```
Bomm!!!!
```

OtherVersion.html

```
<!DOCTYPE html>



    Swagger UI My Own Version






















    
    
    
    


    $(function () {
      var url = window.location.search.match(/url=([^&]+)/);
      if (url && url.length > 1) {
        url = decodeURIComponent(url[1]);
      } else {
        url = "http://petstore.swagger.io/v2/swagger.json";
      }

      // Get Swashbuckle config into JavaScript
      function arrayFrom(configString) {
        return (configString !== "") ? configString.split('|') : [];
      }

      function stringOrNullFrom(configString) {
        return (configString !== "null") ? configString : null;
      }

      window.swashbuckleConfig = {
        rootUrl: 'http://localhost:65343',
        discoveryPaths: arrayFrom('swagger/docs/v1'),
        booleanValues: arrayFrom('true|false'),
        validatorUrl: stringOrNullFrom('http://localhost:65343/validator'),
        customScripts: arrayFrom('ext/WebApplication2-js-swagger_test-js'),
        docExpansion: 'none',
        oAuth2Enabled: ('false' == 'true'),
        oAuth2ClientId: '',
        oAuth2ClientSecret: '',
        oAuth2Realm: '',
        oAuth2AppName: '',
        oAuth2ScopeSeperator: ' ',
        oAuth2AdditionalQueryStringParams: JSON.parse('{}')
      };

      // Pre load translate...
      if(window.SwaggerTranslator) {
        window.SwaggerTranslator.translate();
      }
      window.swaggerUi = new SwaggerUi({
        url: swashbuckleConfig.rootUrl + "/" + swashbuckleConfig.discoveryPaths[0],
        dom_id: "swagger-ui-container",
        booleanValues: swashbuckleConfig.booleanValues,
        onComplete: function(swaggerApi, swaggerUi){
          if (typeof initOAuth == "function" && swashbuckleConfig.oAuth2Enabled) {
            initOAuth({
              clientId: swashbuckleConfig.oAuth2ClientId,
              clientSecret: swashbuckleConfig.oAuth2ClientSecret,
              realm: swashbuckleConfig.oAuth2Realm,
              appName: swashbuckleConfig.oAuth2AppName,
              scopeSeparator: swashbuckleConfig.oAuth2ScopeSeperator,
              additionalQueryStringParams: swashbuckleConfig.oAuth2AdditionalQueryStringParams
            });
          }

          if(window.SwaggerTranslator) {
            window.SwaggerTranslator.translate();
          }

          $('pre code').each(function(i, e) {
            hljs.highlightBlock(e)
          });

          addApiKeyAuthorization();

          window.swaggerApi = swaggerApi;
          _.each(swashbuckleConfig.customScripts, function (script) {
            $.getScript(script);
          });
        },
        onFailure: function(data) {
          log("Unable to Load SwaggerUI");
        },
        docExpansion: swashbuckleConfig.docExpansion,
        jsonEditor: false,
        apisSorter: null, // default to server
        defaultModelRendering: 'schema',
        showRequestHeaders: false
      });

      if (window.swashbuckleConfig.validatorUrl !== '')
        window.swaggerUi.options.validatorUrl = window.swashbuckleConfig.validatorUrl;

      function addApiKeyAuthorization(){
        var key = encodeURIComponent($('#input_apiKey')[0].value);
        if (key && key.trim() != "") {
          var apiKeyAuth = new SwaggerClient.ApiKeyAuthorization("api_key", key, "query");
            window.swaggerUi.api.clientAuthorizations.add("api_key", apiKeyAuth);
            log("added key " + key);
        }
      }

      $('#input_apiKey').change(addApiKeyAuthorization);

      // if you have an apiKey you would like to pre-populate on the page for demonstration purposes...
      /*
        var apiKey = "myApiKeyXXXX123456789";
        $('#input_apiKey').val(apiKey);
      */

      window.swaggerUi.load();

      function log() {
        if ('console' in window) {
          console.log.apply(console, arguments);
        }
      }
  });



    Damn, I love this! Swagger!





```

### 2. SwaggerConfig for Html

```
c.CustomAsset("swagger_test", myAssembly, "WebApplication2.html.swagger_test.html");
                        c.CustomAsset("OtherVersion", myAssembly, "WebApplication2.html.OtherVersion.html");
```

### 3. That's it, let's check the browser.

Now, you're going to ask a question, what's the URL. I didn't figure it out at
the first, but look like Swagger is using the file name as the URL. Since
their default page is /swagger/ui/index, so my new files' URL will be
`/swagger/ui/OtherVersion` and
`/swagger/ui/swagger_test`

Following is one of my new pages, OtherVersion. Isn't this so sweet? As a
developer when you use other UI Framework if you can replace CSS, Javascript
and HTML but keep their original logic. That's just fantastic.

![](http://res.cloudinary.com/dmwrakaup/image/upload/v1458972150/uiblm9hoxxitxz1fgxls.png)

### Add .NET XML comment for swagger's API description

ASP.NET WebAPI's default API helper document also looks for DLL's XML comment
for description. We can do that in swagger too.

#### 1. Project property

The first thing you need to do is go to the project that contains the API
controller to check the XML documentation file, so when building the solution
visual studio will update the XML with comments you add to the class. Also,
swagger later will read the XML's comment as a description of the API too.

![](http://res.cloudinary.com/dmwrakaup/image/upload/v1459030325/o170ozq0mak76k8hfoqi.png)

#### 2. SwaggerConfig setting

The next important thing is, swagger has not registered the API XML, you can
add it as follows.

```
c.IncludeXmlComments(string.Format(@"{0}\bin\APIDemo.XML", System.AppDomain.CurrentDomain.BaseDirectory));
```

Following are examples of the WebAPI controller and the API Model class' XML
document.

```
///
    /// my product
    ///
    public class Product
    {
        ///
        /// product id
        ///
        public Guid GuidId { get; set; }
        ///
        /// product Id
        ///
        public int ProductId { get; set; }
        ///
        /// product name
        ///
        public string ProductName { get; set; }
        ///
        /// product price
        ///
        public decimal Price { get; set; }
        ///
        /// product unit
        ///
        public int Unit { get; set; }
```

```
///
    /// ProductController API
    ///
    public class ProductController : ApiController
    {
        ///
        /// products data
        ///
        public static ListProducts
        {
            get
            {
                return new List
                {
                    new Product(Guid.NewGuid(), 122, "Product A", 300, 1),
                    new Product(Guid.NewGuid(), 333, "Product B", 400, 10),
                    new Product(Guid.NewGuid(), 444, "Product C", 500, 20),
                    new Product(Guid.NewGuid(), 555, "Product D", 600, 15),
                    new Product(Guid.NewGuid(), 777, "Product E", 700, 5)
                };
            }
        }

        ///
        ///  get values for products
        ///
        ///
        public IEnumerable Get()
        {
            return Products;
        }
```

#### 3. Done! Let's browser the API Document

Now, we're done, after building the solution, you should see your XML comment
add to the Csharp class at the Swagger API documentation page.

![](https://d1p0mp3f1fx0hz.cloudfront.net/_iw664rs80.png)

### Conclusion

Swagger with ASP.NET MVC will provide very powerful API documentation and it
is very flexible.

Check the
Code
mentioned in this blog.

This walkthrough tutorial is about how to set up Swagger with ASP.NET MVC API by using Visual Studio 2015, also provides steps ofhow to customize the swagger UI.

How to Setup and Customize Swagger with ASP.NET MVC


11 tools for responsive UI.

1. [http://www.browserstack.com/responsive

Best tool! Lots of variety testing enviroment.Altought have to paid, but
it's worth.

http://www.studiopress.com/responsive/

http://responsivetest.net/

http://responsivedesignchecker.com/getbootstrap.com/

http://lab.maltewassermann.com/viewport-resizer/

http://quirktools.com/screenfly/

10 Helpful Resources for Testing Responsive Web Design

http://responsive.is/](http://www.browserstack.com/responsive)

2. Chrome Extension: Responsive Web Design Tester

3. 50 Useful Responsive Web Design Tools For Designers

4. Responsive Resources


Few Useful Links About How to Test Responsive UI


If you want to make your website to be responsive UI to all other device, like
mobile and tablet. short answer I would think is "it depends". However, in
general I would think there are just two way.

1. Create Responsive UI by using Responsive UI Framework

2. Create individual mobile or tablet app

If your have money or time, you could do both, modify your website's UI to be
responsive UI for other device, in additional create the app for individual
device. Responsive UI doesn't need to spend lots of time & money compare
to create mobile app. However, responsive UI is not optimize for specific app,
so lots of device specific functions you can't use. That's the good point to
create mobile app, however you know, taking time.

This blog, I'm trying to list few UI framework if you choose the #2 option,
create responsive UI for your website.

1. Create your own CSS, javascript framework

2. Use Bootstrap, a popular responsive UI Framework.

3. Use other responsive UI Framework.

Flatstrap

http://www.flatstrap.org/download.html

flat style based on Bootstrap

![](https://d1p0mp3f1fx0hz.cloudfront.net/_f4eba7pav.png)

Bootswatch

http://bootswatch.com/

This site have dozen different Boostrap  style, the change is just replace our Boostrap.css.

![](http://res.cloudinary.com/dmwrakaup/image/upload/v1413220066/nja1ygbsxvahnfz1fwrs.png)

One example of bootswatch&rsquo;s Flat style menu bar

![](https://d1p0mp3f1fx0hz.cloudfront.net/_oltqlurha.png)

wrapbootstrap

https://wrapbootstrap.com/tag/mobile

This site has lots of different style for many purpose based Bootstrap CSS
Framework.

![](http://res.cloudinary.com/dmwrakaup/image/upload/v1413220067/g3paqqdvxrnznxkxqgix.png)

One example from Wrapbootstrap about menu bar.

http://wrapbootstrap.com/preview/WB02495S4

![](https://d1p0mp3f1fx0hz.cloudfront.net/_a88ki5fta.png)

What other choice do I have?

If you want to try other CSS Framework, there are list of CSS framework out
there.

But that&rsquo;ll be a big change since you&rsquo;ll replace existing
Bootstrap CSS framework.

http://mashable.com/2013/04/26/css-boilerplates-frameworks/

foundation

http://foundation.zurb.com/

![](http://res.cloudinary.com/dmwrakaup/image/upload/v1413220067/zvoarpp26r4fnuaybser.png)

Gumby

few example,
http://gumbyframework.com/

![](http://res.cloudinary.com/dmwrakaup/image/upload/v1413220067/mrqyizllzquaq4d89usw.png)

Other resources

Responsive CSS Framework Comparison

http://responsive.vermilion.com/compare.php


This blog, I'm trying to list few UI framework if you choose the

Few Useful Links for Responsive Web UI Frameworks


### Example of Log WebAPI MVC3 Controller

Example code of logging every request/response/exception when access to
ASP.NET MVC 3 controller.

```
public class LogFilterAttribute : ActionFilterAttribute
    {
        ILog _log;

        public LogFilterAttribute()
            : this(null)
        {
        }

        public LogFilterAttribute(ILog log)
        {
			// TODO: define default ILog Service
            //_log = log ?? SomekindOfDefaultLogService()
        }

        public override void OnActionExecuting(ActionExecutingContext filterContext)
        {
            string controllerNamespace = string.Format("{0} {1}Controller.{2} {3}",
                filterContext.HttpContext.Request.HttpMethod,
                filterContext.ActionDescriptor.ControllerDescriptor.ControllerName,
                filterContext.ActionDescriptor.ActionName, "Request");
            var requestObject = new
            {
                Request = new
                {
                    Parameters = JsonConvert.SerializeObject(filterContext.ActionParameters),
                    Url = filterContext.HttpContext.Request.RawUrl,
                    Headers = JsonConvert.SerializeObject(filterContext.HttpContext.Request.Headers)
                }
            };

            _log.Save(controllerNamespace, JsonConvert.SerializeObject(requestObject));

            base.OnActionExecuting(filterContext);
        }

        public override void OnActionExecuted(ActionExecutedContext filterContext)
        {
            string controllerNamespace = string.Format("{0}Controller.{1} {2}", filterContext.ActionDescriptor.ControllerDescriptor.ControllerName, filterContext.ActionDescriptor.ActionName, "Response");

            var reponseObject = new
            {
                Response = new
                {
                    StatusCode = filterContext.HttpContext.Response.StatusCode,
                    StatusDescription = filterContext.HttpContext.Response.StatusDescription,
                    Exception = JsonConvert.SerializeObject(filterContext.Exception)
                }
            };

            if (filterContext.Exception != null)
            {
                controllerNamespace = controllerNamespace + " Exception";
            }

            _log.Save(controllerNamespace, JsonConvert.SerializeObject(reponseObject));

            base.OnActionExecuted(filterContext);
        }
    }
```


EXAMPLE OF LOG WEBAPI MVC3 CONTROLLERExample code of logging every request/response/exception when access to ASP.NET MVC 3 controller.

Category WebAPI

How to Embedded Video on Your Site

13 Intranet Applications for Backend Office Systems

How to Setup and Customize Swagger with ASP.NET MVC

Few Useful Links About How to Test Responsive UI

Few Useful Links for Responsive Web UI Frameworks

How to Log All WebAPI Request Response at ASP.NET MVC